<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <h3>路由的重定向</h3>
        <nav>
            <router-link to="/">主页</router-link>
            <router-link to="/add">添加</router-link>
            <router-link to="/insert">重定向到add</router-link>
        </nav>
        

        <router-view></router-view>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>

        // 路由 重定向
        //   - 访问/a，通过代码的方式，让它跳到/b这里。
        //   - 在配置路由时，使用redirect属性即可。

      
        const myrouter = new VueRouter({
           
            routes: [
                {path: '/',component:{template: `<div>我是主页!!!!!</div>`}},
                {
                    path: '/insert', 
                    // 重定向到add
                    redirect: '/add'
                },
                {path: '/add',component:{template: `<div>我是添加</div>`}},

            ]
        })


        new Vue({
            el: '#app',
            data:{},
            methods:{},
            router: myrouter// 用来设置路由对象 
        })

    </script>
</body>
</html>